<template>
  <div class="box">
    <h1>组件间通信: attrs</h1>
    <Child 
      class="warpper" 
      style="background-color: red;" 
      :message="message" 
      :text="text" 
      @qwer="qwerHandler"
      @xxx="xxxhandler"
    >
    </Child>
    <br>
    <HintButton 
      type="danger" 
      :icon="Delete" 
      circle content="删除"
    >
    </HintButton>
    <br>
    <br>
    <HintButton 
      type="primary" 
      :icon="Edit " 
      circle content="编辑"
    >
    </HintButton>
  </div>
</template>

<script lang="ts" setup>
// vue2
//    $attrs    --  接收到除了 prosp接收过的参数 和 class 和 style ,其他绑定在组件上的属性都可以接收到
//    $listener --  接收所有绑定在元素上的自定义事件
// vue3
//    vue3中移除了 $listener, 只留下了 attrs
//    attrs
//        可以接收到绑定在组件上的属性,除了已经被 defineProps 接收过的
//        可以接收到绑定在组件上的事件,除了已经被 defineEmits 接收过的
// 需求: 封装一个带tootip提示的通用按钮 HintButton
// 既然是通用的按钮,关于 el-button 按钮上配置的所有属性,都应该可以配置到该组件上
// 但是,如果组件每一个属性都去接收的化,那么接收的数据太多了
// 使用 attrs 来进行接收
import { Edit, Delete } from '@element-plus/icons-vue'
import { ref } from 'vue';
import Child from './Child.vue'
import HintButton from './HintButton.vue'
const message = ref('我爱你')

const text = ref('你是个好人')

const qwerHandler = () => {
  console.log('qwerHandler--触发');
}
const xxxhandler = () => {
  console.log('xxxhandler--触发');

}

</script>